{% extends 'base.html' %}
{% load static %}
{% block title %}抽奖{% endblock title %}
{% block toplink %}
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'css/lottery.css'%}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css' %}">
{% endblock toplink %}
{% block content %}

{% include 'header-con.html' %}

<div class='winnerBox'>
<h2 style="font-size: 25px; margin: 0 auto;color: black">您有{{ times }}次抽奖机会</h2>
    <div class="turnplate_box">

        <canvas id="myCanvas" width="260px" height="260px">抱歉！浏览器不支持。</canvas>
        <button id="tupBtn" class="turnplatw_btn" {% if times == 0 %}disabled{% endif %}>
        <div id="Btn">
            <img src="{% static 'images/zhuanpan/guding@2x.png'%}" alt="一个展示产品的图片" class="turnplatw_img">

            <div class="goIcon"></div>
            </div>
        </button>
    </div>
</div>
<!--当前页js-->
<script src="{% static 'js/jquery-1.7.2.min.js' %}"></script>
 <!-- Django 模板语言将数据转换为 JSON 字符串，并赋值给 JavaScript 变量  -->
<script id="winner-list-json" type="application/json">{{ winner_list }}</script>
<script id="winner-list-p" type="application/json">{{ probability }}</script>
<script>
    function htmlEntitiesToJSON(str) {
        return str
            .replace(/&quot;/g, '"') // 将 &quot; 替换为 "
            .replace(/&#39;/g, "'"); // 可能还需要替换 &#39; 为 '，取决于您的字符串内容
}
    var w = document.getElementById('winner-list-json').textContent
    var winnerListJsonString = htmlEntitiesToJSON(w);
    var randomRate =  JSON.parse(htmlEntitiesToJSON(document.getElementById('winner-list-p').textContent))
    var winnerList = JSON.parse(winnerListJsonString);
    var times = {{ times }}
    $(document).ready(function() {
        // 点击按钮时执行的函数
        $('#Btn').on('click', function() {
            // 判断按钮是否可用
            if (times===0) {
                // 如果按钮不可用，显示警告框
                alert('没有抽奖次数啦')
            } 
        });
    });

</script>
{% csrf_token %}

<script src="{% static 'js/lottery.js' %}"></script>
<script src="{% static 'js/awardRotate.js' %}"></script>

{% endblock content %}